<script setup lang="ts">
import { defineAsyncComponent } from "vue";
import router from "@/router";
const TodoHeader = defineAsyncComponent(() => import("@/components/TodoHeader.vue"));
const TodoMain = defineAsyncComponent(() => import("@/components/TodoMain.vue"));
const TodoFooter = defineAsyncComponent(() => import("@/components/TodoFooter.vue"));
const handleToEdit = () => {
	router.push('/edit');
}
</script>

<template>
	<section class="todoapp">
		<todo-header></todo-header>
		<todo-main></todo-main>
		<todo-footer></todo-footer>
		<button class="to-edit" @click="handleToEdit">我的笔记</button>
	</section>
</template>

<style lang="scss" scoped>
@import "@/assets/global";

.todoapp {
	background: #fff;
	max-width: 550px;
	margin: auto;
	margin-top: 130px;
	position: relative;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
		0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

.todoapp input::-webkit-input-placeholder {
	font-style: italic;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.4);
}

.todoapp input::-moz-placeholder {
	font-style: italic;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.4);
}

.todoapp input::input-placeholder {
	font-style: italic;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.4);
}

.to-edit:hover {
	color: $theme;
}

.to-edit {
	position: fixed;
	bottom: 22vh;
	right: $right_pos;
	cursor: pointer;
	font-size: 2.5rem;
}
</style>
